<template>
    <div class="SCcallerWrap">
        <!--访客中心头部-->
        <div class="SCcallerTop">
            <span class="SCcallerTopLeft">统计时间：2019-07-25 16:27</span>
            <p class="SCcallerTopRight">
                <span :class="timeIndex == 1?'SCcallerTopRightSpanS':''" @click="timeIndexSelect(1)">今日流量</span>
                <span :class="timeIndex == 2?'SCcallerTopRightSpanS':''" @click="timeIndexSelect(2)">昨日流量</span>
                <span :class="timeIndex == 3?'SCcallerTopRightSpanS':''" @click="timeIndexSelect(3)">一周流量</span>
                <span :class="timeIndex == 4?'SCcallerTopRightSpanS':''" @click="timeIndexSelect(4)">一月流量</span>
            </p>
        </div>
        <!--访客中心第二行-->
        <div class="SCcallerCenter">
            访客总览
        </div>
        <!--访客中心主体部分-->
        <div class="SCcallerBottom">
            <p class="SCcallerBottomTop"><span></span>移动端来源分布</p>
            <div class="SCcallerBottomCenter">
                <p class="SCcallerBottomCenterONe">
                    <span class="SCcallerBottomCenterONeA">来源</span>
                    <span class="SCcallerBottomCenterONeB">访客数占比</span>
                    <span class="SCcallerBottomCenterONeC">访客数</span>
                    <span class="SCcallerBottomCenterONeD">操作</span>
                </p>
                <div class="SCcallerBottomCenterTwo">
                    <div class="SCcallerBottomCenterONeA">
                        <p><span></span>搜索</p>
                        <p><span></span>付费流量</p>
                        <p><span></span>自主访问</p>
                    </div>
                    <div class="SCcallerBottomCenterONeB">
                        <!--访客量所占比-->
                        <p class="SCcallerRatio">{{ratioF[0]}}%</p>
                        <p class="SCcallerRatio">{{ratioF[1]}}%</p>
                        <p class="SCcallerRatio">{{ratioF[2]}}%</p>
                    </div>
                    <div class="SCcallerBottomCenterONeC">
                        <!--所占比长度条是200px-->
                        <p><span class="SCcallerNum">8</span><span class="SCcallerNumLong"></span></p>
                        <p><span class="SCcallerNum">2</span><span class="SCcallerNumLong"></span></p>
                        <p><span class="SCcallerNum">1</span><span class="SCcallerNumLong"></span></p>
                    </div>
                    <div class="SCcallerBottomCenterONeD">
                        <span>立即订购</span>
                    </div>
                </div>
                <p class="SCcallerBottomCenterThree">更新时间：<span>2019-07-25 20:24</span></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SCcaller",
        data(){
            return {
                // 选择流量日期
                timeIndex:1,
                // 循环计时器集合
                intervalAll:[],
                // 延时计时器集合
                setTimeoutAll:[],
                //
                "ratioF":["0","0","0"],
                "ratio":["72.73", "18.18", "9.09"]
            }
        },
        methods: {
            // 选择显示数据的日期
            timeIndexSelect(index){
                this.timeIndex = index;
            }
        },
        mounted(){
            // 设置访客数占比的增长计时器
            this.intervalAll[0] = setInterval(()=>{
                for(var i = 0; i < 3; i++){
                    this.ratioF[i] = Number(this.ratioF[i]) +1;
                    this.ratioF.splice(i, 1 ,this.ratioF[i]);
                    if(this.ratioF[i] > this.ratio[i]){
                        this.ratioF.splice(i, 1 ,this.ratio[i]);
                    }
                }
            },10);
            // 设置访客数长条的增长计时器
            var widthTwo = 0;
            this.intervalAll[1] = setInterval(()=>{
                widthTwo++;
                for(var i = 0; i < 3; i++){
                    $(".SCcallerNumLong")[i].style.width = widthTwo + "px";
                    if(widthTwo > Number(this.ratio[i])+Number(this.ratio[i])){
                        $(".SCcallerNumLong")[i].style.width = Number(this.ratio[i])+Number(this.ratio[i]) + "px";
                    }
                }
            },10);
            // 清除访客数占比的计时器
            this.setTimeoutAll[0] = setTimeout(()=>{
                this.ratioF = this.ratio;
                clearInterval(this.intervalAll[0]);
            },1000);
            // 清除访客数长条增长的计时器
            this.setTimeoutAll[1] = setTimeout(()=>{
                for(var i = 0; i < 3; i++){
                    $(".SCcallerNumLong")[i].style.width = Number(this.ratio[i])+Number(this.ratio[i]) + "px";
                }
                clearInterval(this.intervalAll[1]);
            },1500);
        },
        beforeDestroy(){
            // 组件被破坏之前，计时器清除
            clearInterval(this.intervalAll[0]);
            clearInterval(this.intervalAll[1]);
            clearInterval(this.setTimeoutAll[0]);
            clearInterval(this.setTimeoutAll[1]);
        }
    }
</script>

<style scoped>
 /* 头部 */
 .SCcallerTop{
     width:960px;
     height:33px;
     line-height: 33px;
     font-size: 14px;
     font-weight: 400;
     background: #ffffff;
     padding: 0 28px;
     margin-bottom: 15px;
     /* border-radius: 5px; */
 }
 .SCcallerTopLeft{
     color: #1296DB;
 }
 .SCcallerTopRight{
     height:33px;
     color: #000000;
     float: right;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
 .SCcallerTopRight span{
     display: inline-block;
     width: 80px;
     height: 25px;
     line-height: 25px;
     text-align: center;
     border-radius: 4px;
     margin-left: 10px;
     cursor: pointer;
 }
 .SCcallerTopRight span:hover{
     display: inline-block;
     width: 80px;
     height: 25px;
     color: #FB6451;
     line-height: 25px;
     text-align: center;
     border-radius: 4px;
     margin-left: 10px;
     cursor: pointer;
 }
 /* 选中的日期 */
 .SCcallerTopRight .SCcallerTopRightSpanS{
     color: #FB6451;
 }
 /* 访客中心第二行 */
 .SCcallerCenter{
     width:1016px;
     height:40px;
     font-size:19px;
     font-weight:500;
     text-indent: 28px;
     color:rgba(0,0,0,1);
     line-height:40px;
     background:rgba(255,255,255,1);
 }
 /* 访客中心,中心内容,表 */
 .SCcallerBottomTop{
     height: 40px;
     line-height:40px;
     font-size:19px;
     text-indent: 10px;
     font-weight:800;
     color:rgba(0,0,0,1);
     margin-top: 20px;
 }
 .SCcallerBottomTop span{
     float: left;
     display: inline-block;
     width:3px;
     height:18px;
     margin: 12px 0 0 20px;
     background:#FB6451;
 }
 /* 中心内容表 */
 .SCcallerBottomCenter{
     padding: 20px 50px;
     background: #FFFFFF;
 }
 /* 中心内容表,头部 */
 .SCcallerBottomCenterONe{
     width: 900px;
     font-size:14px;
     font-weight:500;
     color:#464646;
     line-height:30px;
 }
 .SCcallerBottomCenterONe span{
     display: inline-block;
     text-align: center;
 }
 .SCcallerBottomCenterTwo{
     width: 900px;
     border-top: 1px solid #707070;
     border-bottom: 1px solid #707070;
     padding-bottom: 40px;
 }
 .SCcallerBottomCenterTwo div{
     display: inline-block;
     text-align: center;
 }
 .SCcallerBottomCenterONeA{
     width: 20%;
 }
 .SCcallerBottomCenterONeB{
     width: 15%;
 }
 .SCcallerBottomCenterONeC{
     width: 45%;
 }
 .SCcallerBottomCenterONeD{
     width: 15%;
 }
 .SCcallerBottomCenterONeA p{
     height: 50px;
     line-height: 50px;
     font-size:14px;
     font-weight:400;
     color:rgba(70,70,70,1);
 }
 .SCcallerBottomCenterONeA p span{
     display: inline-block;
     width: 10px;
     height: 6px;
     background: #FB6451;
     margin-right: 5px;
 }
 /* 中心内容,访客数占比 */
 .SCcallerBottomCenterONeB p{
     height: 50px;
     line-height: 50px;
     font-size:14px;
     font-weight:400;
     color:rgba(70,70,70,1);
 }
 .SCcallerBottomCenterONeC{

 }
 .SCcallerBottomCenterONeC p{
     height: 50px;
     line-height: 50px;
     font-size:14px;
     font-weight:400;
     color:rgba(70,70,70,1);
     position: relative;
     text-align: left;
 }
 /* 中心内容,访客数,数量 */
 .SCcallerBottomCenterONeC p span:nth-child(1){
     display: inline-block;
     width: 130px;
     height: 50px;
     text-align: right;
 }
 /* 中心内容,访客数,长条 */
 .SCcallerBottomCenterONeC p span:nth-child(2){
     display: inline-block;
     width: 0px;
     height:6px;
     margin-left: 20px;
     border-left: 1px solid #cccccc;
     background:#FB6451;
     position: relative;
     top: -2px;
 }
 /* 中心内容:操作:立即订购 */
 .SCcallerBottomCenterONeD span{
     display: inline-block;
     width:69px;
     height:22px;
     line-height: 22px;
     font-size:14px;
     text-align: center;
     font-weight:400;
     color:#ffffff;
     background:#FB6451;
     border-radius:3px;
     cursor: pointer;
     position: relative;
     top: -50px;
 }

 /* 下面的更新时间 */
 .SCcallerBottomCenterThree{
     font-size:14px;
     font-weight:400;
     color:rgba(120,120,120,1);
     line-height:40px;
 }
</style>
